<template>
    <div calss = "backgroud" id = "backgroud" >
    <div class = "wrap" id ="wrap">
        <div class = "logGet">
            <!-- 头部提示信息 -->
            <div class = "logD logDtip">
                <button v-on:click="loginin()">登入</button>
                <button v-on:click="signin()" style="margin-left:10px;">注册</button>
            </div>
            <!-- 输入框 -->
            <div class="lgD">
                <input  v-model="name" type="text"  placeholder="输入用户名" />
            </div>
            <div class="lgD">
                <input  type="password" v-model="pass"  placeholder="输入用户密码" />
            </div>
            <div class="lgD" v-show="see" >
                <input  v-model="confirm" type="password" placeholder="确定密码" />
            </div>
            <div class= "logC"  v-show="see">
                <a><button v-on:click="zhece()">确定注册</button></a>
            </div>
            <div class= "logC"  v-show="!see">
                <a><button v-on:click="login()">确定登入</button></a>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
//引入js-cookie
import Cookies from 'js-cookie'

export default {
    name: 'login',
    data() {
        return {
            name: "",
            pass: "",
            encodepass:"",
            confirm: "",
            see: false,
            reg: /^(\w){5,25}$/
        }
    },
    methods:{
         signin(){
            //清空数据
            this.name ="";
            this.pass="";
            this.confirm="";
            this.see = true;
        },
        loginin(){
           //清空数据
            this.name ="";
            this.pass="";
            this.confirm="";
            this.see = false;
            Cookies.remove("loginName");
        },
        login(){
            //跳转路由
            Cookies.set("loginName","张三");
            var redirect= this.$route.query.redirect;
            var toPath = redirect ?redirect:"/home/user";
            window.console.log("redirect is"+ redirect +';toPath is'+ toPath);
            this.$router.push(toPath);
        }
    }
   
}
</script>
<style scoped>


 html,body,#app {
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;

  }
    #backgroud {
        /* background-image: url(../../assets/login_bg.png);
        background-size: 100%;  */
        /* background-repeat: no-repeat;  */
        /* background-position: center center; */
        background-color: #4e5257;
        width:100%;
        height: 100%;
    }
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        height: 600px;
        width: 100%;
        background-position: center center;
        position: relative;
        
    }
    #head {
        height: 120px;
        width: 100;
        background-color: #66CCCC;
        text-align: center;
        position: relative;
    }
    #wrap .logGet {
        height: 400px;
        width: 368px;
        position: absolute;
        background-color: rgb(255, 254, 251);
        top: 100px;
        right: 15%;
        border-radius:10px;
    }
    .logC a button {
        width: 60%;
        height: 45px;
        background-color: #0f7bdf;
        border: none;
        color: white;
        font-size: 18px;
        border-radius:10px;
    }

    .logGet .logD.logDtip button   {
        font-size: 20px;
        margin-top: 30px;
        border: none;
        width: 100px;
        color: white;
        background-color: #0f7bdf;
        border-radius:5px;
    }

    #wrap .logGet .logD.logDtip {
        width: 100%;
        /* border-bottom: 1px solid #ee7700; */
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    .logGet .lgD img {
        position: absolute;
        top: 5px;
        left: 8px;
        border-radius:50%;
    }
    .logGet .lgD input {
        width: 100%;
        height: 42px;
        /* text-indent  为首行缩进 */
        text-indent: 5rem;   
        background:rgba(255,255,255,0);
        color: rgb(236, 222, 18);
        border: 0px;
        outline:none;
        font-size: 20px;
    }

    #wrap .logGet .lgD {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }

    #wrap .logGet .logC {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
</style>
